<!--
 * @Descripttion:
 * @version:
 * @Author: Connor
 * @Date: 2021-03-12 16:04:54
 * @LastEditors: Ken
 * @LastEditTime: 2021-03-20 14:27:01
-->
<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>货物到仓</span>
        <span>
          （同一查询条件的结果会缓存1小时，如果需要最新数据请清理浏览器缓存，一般是
          ctrl+shift+del）
        </span>
      </div>

      <el-form
        ref="searchForm"
        :model="searchForm"
        :rules="rules"
        size="mini"
        label-width="100px"
      >
        <el-row :gutter="10">
          <el-col :span="20">
            <el-row>
              <el-col :span="8">
                <el-form-item label="入库时间：" prop="instockTimeRange">
                  <el-date-picker
                    v-model="searchForm.instockTimeRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item prop="instockChannelIds" label="渠道：">
                  <el-select
                    v-model="searchForm.instockChannelIds"
                    multiple
                    filterable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, value) in channelMap"
                      :key="value"
                      :label="item"
                      :value="value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="statistics">
              统计
            </el-button>
          </el-col>
        </el-row>
      </el-form>

      <line-chart
        :chart-data="chartData"
        :titleInfo="titleInfo"
        :chartList="chartList"
      />
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import LineChart from "./components/LineChart";
export default {
  props: ["data"],
  components: {
    LineChart
  },
  data() {
    0;
    return {
      loading: false,
      searchForm: {
        instockTimeRange: [],
        instockChannelIds: ""
      },
      channelMap: {
        1: 1,
        2: "ed"
      },
      titleInfo: {
        text: "到仓曲线图",
        subtext: ``,
        legend: ["到仓件数", "实重", "方数", "日期"]
      },
      chartList: [
        { prop: "totalCountList", label: "到仓件数" },
        { prop: "totalWeightList", label: "实重" },
        { prop: "totalVolumeList", label: "方数" }
      ],
      chartData: {
        xTitle: []
      },
      rules: {
        instockTimeRange: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      }
    };
  },
  mounted() {
    this.init();
    // this.titleInfo.subtext = `总应收：${this.chartData.totalReceive}RMB，总应付：${this.chartData.totalPay}RMB，总利润：${this.chartData.totalProfit}RMB`;
    // this.statistics();
  },
  methods: {
    onSubmit() {
      if ("" === this.id) {
        return;
      }
      var data = {};
      data["id"] = this.id;
      ajax("request", data).then(
        res => {
          this.row = res;
        },
        error => {
          console.log(error);
        }
      );
    },
    async init() {
      const { data } = await ajax("initData", {});
      this.channelMap = data;
    },
    statistics() {
      this.$refs.searchForm.validate(valid => {
        if (valid) {
          this.getInfo();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async getInfo() {
      this.loading = true;
      const { data } = await ajax("queryGoodsArrivalData", {
        startInStockTime: this.searchForm.instockTimeRange[0] || "",
        endInStockTime: this.searchForm.instockTimeRange[1] || ""
      });
      if (data) {
        this.chartData = data;
        this.chartData.xTitle = data.instockDayList;
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped>
/deep/ .el-select {
  width: 100%;
}
</style>
